<template>
	<view class="box">
		<view class="bg f-w">
			<image class="bg-img" src="https://jw.xzsw2021.com/static/img/11_d.png" mode=""></image>
			<view class="content" style="position: relative;z-index: 10;">	
				<!-- 文字 -->
			<!-- 	<view class="title">
					<view class="t1">邀好友 得奖励</view>
					<view class="t2">成为分销商</view>
				</view> -->
				<!-- 二维码 -->
				<view class="code">
					<view class="code2">
						<image :src="img" mode=""></image>
					</view>
				</view>
				<view class="save" @click="saveImg">保存到相册</view>
				<button class="btn" open-type="share" >分享好友</button>
			</view>
		</view>
		<!--  -->
		
	</view>
</template>

<script>
	import Cache from '@/util/cache.js'
	export default {
		data() {
			return {
				img:'',//二维码图片
				agent_id:'',//
				title:''
				
			}
		},
		onShareAppMessage(e) {
			return {
				title: this.title,
				imageUrl:this.img,
				path: `/pages/index/index?spid=${Cache.get('uid')}`, // 好友点击分享之后跳转到的小程序的页面
			}
		},
		onLoad() {
			this.getimg()
			this.getuserinfo()
		},
		onShow(){
			// this.$getHeight();
		},
		methods: {
			getuserinfo() {
				this.$request('user', {}, 'GET').then(res => {
					uni.setStorageSync('uid', res.data.uid)
				})
			},
			// 获取二维码
			getimg(){
				this.$request('user/v2/spread_image?type=routine',{},'GET').then(res=>{
					this.img=res.data.qrcode
					this.title=res.data.nickname+res.data.mark
					
				})
			},
			// 分享好友
			shareFriends(){
				
			},
			// 保存到相册
			saveImg(){
				uni.getImageInfo({
					src:this.img,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.path,
							success: function() {
								uni.showToast({
									title: "保存成功",
									icon: "none"
								})
							}
						});
					}
				})
				

			}
			
		}
	}
</script>
<style>
	page{
		background-color: rgba(17,158,124);
	}
</style>
<style lang="scss" scoped>
	.box{
		.bg{
			position: relative;
			width: 750rpx;
			// height: 1458rpx;
			height: 1370rpx;
			.bg-img{
				position: absolute;
				left: 0;
				top: 0;
				// width: 100%;
				// height: 100%;
				width: 750rpx;
				height: 1370rpx;
			}
		}
		.content{
			position: relative;
			width: 750rpx;
			height: 1370rpx;
			// min-height: 100vh;
			overflow: hidden;
			.title{
				position: absolute;
				top: 150rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 750rpx;
				font-size: 60rpx;
				font-weight: bold;
				letter-spacing: 5rpx;
				text-align: center;
				.t1{
					color: #fff;
				}
				.t2{
					color: #FDF357;
				}
			}
			.code{
				position: absolute;
				top: 470rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 622rpx;
				height: 592rpx;
				padding: 35rpx 45rpx;
				border-radius: 30rpx;
				background-color: #fff;
				border: 1rpx solid #14978e;
				box-sizing: border-box;
				.code2{
					padding: 35rpx;
					width: 530rpx;
					height: 520rpx;
					border: 1rpx solid #14978e;
					border-radius: 20rpx;
					box-sizing: border-box;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.save{
				position: absolute;
				top: 1100rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 750rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
			}
			.btn{
				position: absolute;
				top: 1200rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 610rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				button::after{
					border: none;
				}
			}
		}
	}
</style>
